import { defineComponent, watch, ref } from 'vue';
// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 定义 ref
    const chartRef = ref()
    // 定义颜色
    const colorList = {
      linearYtoG: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#f5b44d"
          },
          {
            offset: 1,
            color: "#28f8de"
          }
        ]
      },
      linearGtoB: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: "#1832d6"
          },
          {
            offset: 1,
            color: "#cd0f0f"
          }
        ]
      },
      linearBtoG: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: "#b85010"
          },
          {
            offset: 1,
            color: "#28f8de"
          }
        ]
      },
      areaBtoG: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "rgba(35,184,210,.2)"
          },
          {
            offset: 1,
            color: "rgba(35,184,210,0)"
          }
        ]
      }
    }
    // 配置项
    let options ={}

    // 监听
    watch(
      () => props.cdata,
      (val: any) => {
        options = {
          title: {
            text: "",
            textStyle: {
              color: "#D3D6DD",
              fontSize: 24,
              fontWeight: "normal"
            },
/*            subtext: val.year + "/" + val.weekCategory[6],
            subtextStyle: {
              color: "#fff",
              fontSize: 16
            },*/
            // top: 50,
            // left: 80
          },
          legend: {
            // top: 120,
            // left: 80,
            show: true,
            /*orient: "vertical",
            itemGap: 15,
            itemWidth: 12,
            itemHeight: 12,*/
            data: ["使用中", "维护中", "空闲"],
            textStyle: {
              color: "#fff",
              fontSize: 14
            }
          },
          tooltip: {
            trigger: "item"
          },
          grid: {
            // left: 90,
            // right: 80,
            // bottom: '15%',
            // top: "50%"
          },
          xAxis: {
            type: "category",
            position: "bottom",
            axisLine: true,
            axisLabel: {
              color: "rgba(255,255,255,.8)",
              fontSize: 12
            },
            data: ['10:00','10:05','10:10','10:15','10:20','10:25','10:30','10:35','10:40','10:45','10:50','10:55','11:00']
          },
          // 下方Y轴
          yAxis: {
            name: "器材数",
            type: 'value',
            /*nameLocation: "end",
            nameGap: 24,
            nameTextStyle: {
              color: "rgba(255,255,255,.5)",
              fontSize: 14
            },
            max: val.maxData,
            splitNumber: 4,

            axisLine: {
              lineStyle: {
                opacity: 0
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#fff",
                opacity: 0.1
              }
            },
            axisLabel: {
              color: "rgba(255,255,255,.8)",
              fontSize: 12
            }*/
          },
          series: [
            {
              // name: "维护中",
              type: "line",
              smooth: true,
              symbol: "emptyCircle",
              symbolSize: 4,
              itemStyle: {
                normal: {
                  color: "#fff"
                }
              },
              lineStyle: {
                normal: {
                  color: '#4b056e',
                  width: 2
                }
              },
              areaStyle: {
                normal: {
                  color: colorList.areaBtoG
                }
              },
              data: [12,16,8,23,34,23,12,65,2,44,12,64,7],
              lineSmooth: true,
              tooltip: {
                position: "top",
                formatter: "{c}",
                backgroundColor: "rgba(103,232,28,0.2)",
                padding: 6
              }
            },
            {
              // name: "使用中",
              type: "line",
              smooth: true,
              symbol: "emptyCircle",
              symbolSize: 4,
              itemStyle: {
                normal: {
                  color: "#fff"
                }
              },
              lineStyle: {
                normal: {
                  color: colorList.linearGtoB,
                  width: 2
                }
              },
              areaStyle: {
                normal: {
                  color: colorList.areaBtoG
                }
              },
              data: [200,300,400,102,342,300,342,890,700,547,123,132,10],
              lineSmooth: true,
              tooltip: {
                position: "top",
                formatter: "{c}",
                backgroundColor: "rgba(103,232,28,0.2)",
                padding: 6
              }
            },
            {
              // name: "空闲",
              type: "line",
              smooth: true,
              symbol: "emptyCircle",
              symbolSize: 4,
              itemStyle: {
                normal: {
                  color: "#fff"
                }
              },
              lineStyle: {
                normal: {
                  // color: colorList.linearBtoG,
                  color: '#dca847',
                  width: 2
                }
              },
              areaStyle: {
                normal: {
                  color: colorList.areaBtoG
                }
              },
              data: [20,60,90,62,32,50,102,200,10,37,83,12,70],
              lineSmooth: true,
              tooltip: {
                position: "top",
                formatter: "{c} ",
                backgroundColor: "rgba(216,59,96,0.2)",
                padding: 6
              }
            },
            {
              name: "",
              type: "line",
              smooth: true,
              symbol: "emptyCircle",
              symbolSize: 8,
              itemStyle: {
                normal: {
                  color: "#fff"
                }
              },
              lineStyle: {
                normal: {
                  // color: colorList.linearBtoG,
                  color: '#3a9dc1',
                  width: 3
                }
              },
              areaStyle: {
                normal: {
                  color: colorList.areaBtoG
                }
              },
              data: [200,300,400,102,342,300,342,890,700,547,123,132,10],
              lineSmooth: true,
              tooltip: {
                position: "top",
                formatter: "{c}",
                backgroundColor: "rgba(28,152,232,.2)",
                padding: 6
              }
            },
          ]
        }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "320px"
      const width = "100%"

      return <div>
        <echart ref={chartRef} height={height} width={width} />
      </div>
    }
  }
})

